<template>
  <div>
    <h2>自定义指令</h2>
    <p v-color="c">hello world</p>
    <input type="text" v-focus />

    <hr />
    <my-test :uname="uname"></my-test>
  </div>
</template>

<script>
import MyTest from "@/components/MyTest.vue";
export default {
  components: { MyTest },
  data() {
    return {
      c: "red",
      uname: 'zhangsan',
    };
  },
  // 自定义指令
  directives: {
    //   指令: {
    //     // el 表示使用这个指令的元素， obj.value 表示指令的值
    //     bind (el, obj) {}, // 只会执行一次，可以在里面对元素进行样式的设置
    //     inserted(el, obj){}, // 只会执行一次，可以在里面对元素进行行为操作，比如让元素获取得点
    //     update (el, obj) {}, // 数据更新后，子组件的页面不一定会更新，它就会执行
    //     componentUpdated(el, obj) {}, // 数据更新后，包括子组件的数据、页面也更新后，它会执行
    //     unbind(el, obj) {} // 指令解绑的时候(销毁)，它执行
    //   },
    //   指令 (el, obj) {}, // 如果指令只有bind和update方法，并且这两个方法一样，则可以简写成函数

    color: {
      bind(el, obj) {
        // console.log(el);
        // console.log(obj);
        el.style.color = obj.value;
      },
      update(el, obj) {
        el.style.color = obj.value;
      },
    },

    // color (el, obj) {
    //   el.style.color = obj.value
    // }
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
};
</script>

<style>
</style>